<style>
    /* IE has layout issues when sorting (see #5413) */
    .group { zoom: 1 }
    .ui-state-highlight { height: 39px; line-height: 15px; }
</style>

<script type="text/javascript">  
    function SelectItem(id)
    {
        $("#list_com li").removeClass ("ui-selected");
        $('#'+id).addClass("ui-selected");
    }

    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight"                        
        });
        var strx = setOrder(); 
        
        $( "#sortable" ).sortable({            
            stop: function(event, ui) {                
                str_id = setOrder();                
                if(strx != str_id){
                    if ( confirm(_['ban_co_sap_xep_ko']) )
                    {            
                        setOrderAjax(str_id);                       
                    }
                    else{					
                        $(this).sortable( "cancel" );                      
                    }
                }
            }                     
        });
                
        $("#sortable").disableSelection();
                
    });
    hs.allowMultipleInstances = false;
</script>
<div id="div_html">
    <h1 style="text-align: center;">{list_modules_title}</h1>

    <div class="tools">      
        <div class="clear"> </div>
        <div id = "list_controler" > 
            <div class="list_com_title">
                <p>{list_com}</p>                    
            </div> 
            <ul id="list_com" class="list_com">
                [OPEN list_coms]
                [LOOP com]
                <li id="{com_id}" {class} onclick="SelectItem({com_id}); LoadPosition('{url}',{com_id});">{com_name}</li>
                [/LOOP com]  
                [CLOSE list_coms]                     
            </ul>
        </div>

        <div class="hastable" id="hastable">
            <div id="button_function tools">
                <a style="text-decoration:none; color:#000;" 
                   href="{url_add}" 
                   onclick="return hs.htmlExpand(this, {
                       objectType: 'iframe', width: 1000, 
                       creditsPosition: 'bottom left', 
                       headingEval: 'this.a.title',
                       wrapperClassName: 'titlebar' } )" 
                   title="{add_new}">
                    <input type="button" 
                           id="but_add_new" 
                           class="but_login"                               
                           value=" {add_new} " />
                </a>
                <input type="button" 
                       id="but_true" 
                       disabled="disabled" 
                       class="but_tool butx"                           
                       value=" {true} "  
                       onclick="active_bv('{status_href}','true' , '{page}')" />

                <input type="button" 
                       id="but_false" 
                       disabled="disabled" 
                       class="but_tool butx"                            
                       value=" {false} "
                       onclick="active_bv('{status_href}', 'false' , '{page}') " />

                <input type="button" 
                       id="but_delete" 
                       disabled="disabled" 
                       class="but_tool butx"                           
                       value=" {delete} " 
                       onclick="del_bv('{status_href}','delId[]','1','option')" />   
                <a style="text-decoration:none; color:#000;" 
                   href="{url_copy}" 
                   onclick="return hs.htmlExpand(this, {
                   objectType: 'iframe',
                   width: 510, 
                   height:370,
                   creditsPosition: 'bottom left', 
                   headingEval: 'this.a.title',
                   wrapperClassName: 'titlebar' } ); " 
                   title="{copy}">
                    <input type="button" 
                           id="but_copy"                         
                           class="but_login "                            
                           value=" {copy} "
                           />
                </a>
                <!--################# HTML COPY COM ########################## -->
                
                <!--################# END HTML COPY COM ########################## -->
            </div>
            <div class="clear"></div>
            <table  class="tbl_cms"> 
                <thead>
                    <tr class="tbl_header">
                        <td class="column_1" rowspan="1">
                            <input type="checkbox"  class="submit" name="all" 
                                   onclick="checkAll();"  
                                   value="all" />
                        </td>   
                        <td class="column_3" rowspan="1">{header_listmodule}</td>
                        <td class="column_5" rowspan="1">{header_listposotion}</td>
                        <td class="column_order" rowspan="1">{header_sortorder}</td>
                        <td class="column_8">{header_status}</td> 
                    </tr>
                </thead> 
                <tbody id="sortable" > 
                    [OPEN htmlnew]
                    
                    [LOOP list]
                    <tr id="{id_mod}"  >
                        <td class="center column_1">
                            <input type="hidden" 
                                   value="{id_mod}" 
                                   name="id_mod_{id_mod}" 
                                   style="text-align: center;"  
                                   class="textreadonly"  />
                            <input type="checkbox" 
                                   class="checkbox" 
                                   name="delId[]" 
                                   onclick="checkOne()"
                                   value="{id_mod}"/>
                        </td>

                        <td class="tooltip column_3" title="{list_module}" name="list_module">                                

                            <span style="text-align: left;">
                                {list_module}
                            </span>
                            <input type="hidden" value="{id_modu}" name="id_modu_{id_mod}"  class="textreadonly" readonly="readonly"/>
                        </td> 
                        <td name="list_position" class="column_5">    
                            <span style="text-align: left;">
                                {list_position}
                            </span>
                        </td> 
                        <td class="column_order" >
                            <span class="ui-icon ui-icon-arrowthick-2-n-s" style="display: inline-block;"></span>
                            <span style="text-align: center;" class = "order">
                                {order}
                            </span>                                    
                            <input type="hidden" value="{com_id}" name="com_id" style="text-align: center;"  class="textreadonly"  />                                    
                        </td> 
                        <td class="tooltip column_8">
                            {status}
                        </td> 
                    </tr>
                    [/LOOP LIST]
                    [CLOSE htmlnew]
                </tbody>
            </table>           
        </div>
    </div>

</div>